<template>
  <div class="box">
    <div class="top-box">
      <img style="width: 40%;" src="../../assets/backlogo.png" alt="">
      <span >AI开放社区</span>
    </div>
    <div class="int-box">
      <van-form @submit="onSubmit" style="display: flex;flex-direction: column;align-items: center;">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
				<!-- <van-button style="margin-top:30px; width: 100px;" type="info">人机验证</van-button> -->

        <div style="margin: 30px 16px;width: 100%;">
          <van-button style="width: 100%;" round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    <div class="btn-box">
      <span @click="toRegister">新用户注册</span>
      <span is-link @click="showPopup">人脸识别</span>
      <van-popup v-model="show">正在进行人脸识别</van-popup>
      <span is-link @click="showPopup2">更多选项</span>
      <van-popup class="van-cell-box" v-model="show2" position="bottom" :style="{ height: '20%' }">
        <van-cell title="找回密码" value=">" />
        <van-cell title="问题反馈" value=">" />
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      username: '',
      password: '',
      show: false,
      show2:false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    showPopup() {
      this.show = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    toRegister(){
      this.$router.push('/phoneRegister')
    }
  },
}
</script>

<style lang="less" scoped>
.box{
  width: 100%;
  height: 100%;
  background: white;
  .top-box{
    width: 100%;
    height: 100%;
    // background-color: aqua;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 50px;
    span{
      font-size: 30px;
    }
  }
}
.btn-box{
  width: 100%;
  height: 100px;
  background: white;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.van-cell-box{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>